<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>tab切换</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#boxDiv{
				width:500px;
				margin: 100px auto;
			}
			#boxDiv ul{
				width: 500px;
				display: flex;
				justify-content: space-between;
			}
			#boxDiv ul li{
				width: 100px;
				height: 25px;
				background: grey;
				color: white;
				font-size: 20px;
				text-align: center;
				line-height: 25px;
				cursor: pointer;
			}
			#showDiv{
				width: 500px;
				height: 400px;
				background: #CCFFCC;
				text-align: center;
				line-height: 400px;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div id="boxDiv">
			<ul>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
			</ul>
			<div id="showDiv">第一页</div>
		</div>
		
		<script>
			function Fn(idName,modality,content){
				this.ele = document.getElementById(idName);
				this.modality = modality;
				this.content = content;
				this.changeStyle = function(){
					this.ele.innerHTML = this.content;
					this.ele.style.background = this.modality;
				}
			};
			var lis = document.getElementsByTagName("li");

			lis[0].onclick = function(){
				var tab = new Fn("showDiv","#CCFFCC","第一页");
				tab.changeStyle();
			};
			lis[1].onclick = function(){
				var tab = new Fn("showDiv","skyblue","第二页");
				tab.changeStyle();
			};
			lis[2].onclick = function(){
				var tab = new Fn("showDiv","pink","第三页");
				tab.changeStyle();
			};
			lis[3].onclick = function(){
				var tab = new Fn("showDiv","plum","第四页");
				tab.changeStyle();
			};
			lis[4].onclick = function(){
				var tab = new Fn("showDiv","lightgreen","第五页");
				tab.changeStyle();
			}
		</script>
	</body>
</html>
